<template>
  <div class="container">
    <div
      class="left"
      :class="currentState ? 'leftLoginAniStyle' : 'leftRegisterAniStyle'"
    >
      <!-- logo -->
      <div class="login-logo-div">
        <el-image src="../src/assets/logo_trans.png" fit="contain"> </el-image>
      </div>
      <!-- title -->
      <div class="titleDiv">
        <div class="title">智能点餐系统</div>
        <div class="titleEn">Intelligent Ordering System</div>
        <div class="description">· 口味推荐 · 评论归纳 · 菜品识别</div>
      </div>
      <div class="plateDiv">
        <el-image class="plateImg" src="../src/assets/plate.png" fit="contain"></el-image>
      </div>
    </div>

    <!-- 登录卡片 -->
    <el-card class="loginCard" v-if="currentState">
      <!-- 卡片标题 -->
      <div class="cardHead">
        <div>
          <span class="cardTitle">登&nbsp&nbsp录</span>
          <el-button class="slideLink" type="warning" text @click="slideChange"
            >没有账号？去注册 </el-button
          ><br />
          <span class="cardTitleEn">&nbspLogin</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="radioDiv">
        <el-radio-group v-model="loginForm.role">
          <el-radio-button label="customer">我是顾客</el-radio-button>
          <el-radio-button label="owner">我是商家</el-radio-button>
        </el-radio-group>
      </div>
      <!-- 卡片主体 -->
      <el-form :model="loginForm" :rules="loginRules" ref="loginRuleForm" size="large">
        <el-form-item label="账&nbsp号" prop="username">
          <!-- 账号输入框 -->
          <el-input v-model="loginForm.username" input-width="50px"></el-input>
        </el-form-item>
        <el-form-item label="密&nbsp码" prop="password">
          <!-- 密码输入框 -->
          <el-input v-model="loginForm.password" show-password></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-button class="loginBtn" round color="#E3A566" @click="login"
          >登&nbsp录</el-button
        >
      </el-form>
      <!-- 团队介绍 -->
      <div class="intro">——&nbsp武汉大学计算机学院本科生团队打造&nbsp——</div>
    </el-card>

    <!-- 注册卡片 -->
    <el-card class="registerCard" v-if="!currentState">
      <!-- 卡片标题 -->
      <div class="cardHead">
        <div>
          <span class="cardTitle">注&nbsp&nbsp册</span>
          <el-button class="slideLink" type="warning" text @click="slideChange">
            已有账号？去登录</el-button
          ><br />
          <span class="cardTitleEn">&nbspRegister</span>
        </div>
      </div>
      <div class="line"></div>
      <!-- 卡片主体 -->
      <el-form
        :model="registerForm"
        :rules="registerRules"
        ref="registerRuleForm"
        size="large"
      >
        <el-form-item label="账&nbsp号" prop="username">
          <!-- 账号输入框 -->
          <el-input v-model="registerForm.username" input-width="50px"></el-input>
        </el-form-item>
        <el-form-item label="密&nbsp码" prop="password">
          <!-- 密码输入框 -->
          <el-input v-model="registerForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="registerForm.confirmPassword" show-password></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-button class="registerBtn" round color="#E3A566" @click="register"
          >注册并登录</el-button
        >
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 在组件中使用 Vuex
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        role: "customer",
      },
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
            message: "密码必须包含至少一个字母和一个数字",
            trigger: "blur",
          },
        ],
      },
      registerRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
            message: "密码必须包含至少一个字母和一个数字",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: this.validateConfirmPassword, trigger: "blur" },
        ],
      },
      userData: {},
      currentState: true,
    };
  },
  created() {},
  methods: {
    login() {
      let loading = this.$loading({
        text: "Loading", // 显示文本
        spinner: "el-icon-loading", // 显示的 icon
        spinnerColor: "#E3A566",
        textColor: "#E3A566",
        // background: "rgba(0, 0, 0, 0.2)", // loading 遮罩层颜色
        target: document.querySelector(".loginCard"), // 挂载的 DOM 元素
      });
      let _this = this;
      this.$refs["loginRuleForm"].validate((valid) => {
        //如果数据格式不符合要求,直接返回
        if (!valid) {
          this.$message({
            message: "请输入正确格式的数据！",
            type: "error",
          });
          return;
        }
        let url = "/authenticate/login";
        //数据格式符合要求，封装信息请求后端
        _this.$http
          .post(url, this.loginForm)
          .then(function (response) {
            //返回token的信息并保存
            console.log(response.data);
            _this.$store.commit("setToken", "Bearer " + response.data);

            //获取到账户信息并保存
            let tmpThis = _this;
            url = "users/username/" + _this.loginForm.username;
            _this.$http.get(url).then(function (response) {
              tmpThis.$store.commit("setAccount", response.data);
              console.log(tmpThis.$store.state.account);

              // 商家页面跳转
              if (tmpThis.loginForm.role === "owner") {
                tmpThis.$router.push({
                  path: "/owner/home",
                });
                return;
              }

              // 顾客跳到注册引导页面
              if (response.data.gender === null) {
                tmpThis.$router.push({
                  path: "/customer/flavor",
                });
                return;
              }

              // 顾客跳到主页
              tmpThis.$router.push({
                path: "/customer/home",
              });
            });
            loading.close();
            //根据这个来获取store里面的信息
            // console.log(_this.$store.state.token)
          })
          .catch((e) => {
            this.$message.error(e.response.data);
            loading.close(); // 关闭Loading
          });
      });
    },
    register() {
      let loading = this.$loading({
        text: "Loading", // 显示文本
        spinner: "el-icon-loading", // 显示的 icon
        spinnerColor: "#E3A566",
        textColor: "#E3A566",
        // background: "rgba(0, 0, 0, 0.2)", // loading 遮罩层颜色
        target: document.querySelector(".registerCard"), // 挂载的 DOM 元素
      });
      this.$refs["registerRuleForm"].validate((valid) => {
        //如果数据格式不符合要求,直接返回
        if (!valid) {
          this.$message({
            message: "请输入正确格式的数据！",
            type: "error",
          });
          return;
        }
        // 在这里执行注册逻辑
        console.log("注册账号:", this.registerForm.username);
        console.log("注册密码:", this.registerForm.password);
        console.log("确认密码:", this.registerForm.confirmPassword);
        let url = "/authenticate/register";
        var _this = this;
        //数据格式符合要求，封装信息请求后端
        this.registerForm.avatar = "/photo/avatar/default.jpg";
        _this.$http
          .post(url, this.registerForm)
          .then(function (response) {
            //返回token的信息并保存
            console.log(response.data);
            _this.$store.commit("setToken", "Bearer " + response.data);
            console.log(_this.$store.state.account);
            //获取到账户信息并保存
            let tmpThis = _this;
            url = "/users/username/" + _this.registerForm.username;
            _this.$http.get(url).then(function (response) {
              console.log("新注册的账号是", response.data);
              tmpThis.$store.commit("setAccount", response.data);
              console.log(tmpThis.$store.state.account);
              //成功获取到信息后，页面切换
              tmpThis.$router.push({
                path: "/customer/flavor",
              });
              loading.close();
            });
          })
          .catch((e) => this.$message.error(e.response.data));
      });
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.registerForm.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
    slideChange() {
      this.currentState = !this.currentState;
    },
  },
};
</script>

<style>
.container {
  position: relative;
}

.left {
  width: 100%;
  max-width: 800px;
  min-width: 700px;
  position: absolute;
}

.leftLoginAniStyle {
  animation: leftLoginAni 0.2s ease-in forwards;
}

.leftRegisterAniStyle {
  animation: leftRegisterAni 0.2s ease-in forwards;
}

.login-logo-div {
  float: left;
  width: 50vw;
  transition: transform 0.5s ease-in-out;
}

.titleDiv {
  float: left;
  margin-left: 50px;
}

.title {
  width: 100%;
  margin-top: 20px;
  text-align: left;
  font-size: 28px;
  font-family: sanji;
}

.titleEn {
  width: 100%;
  margin-top: 15px;
  text-align: left;
  font-size: 22px;
  font-family: sanji;
}

.description {
  width: 100%;
  margin-top: 15px;
  text-align: left;
  color: gray;
  font-size: 18px;
  font-family: sanji;
}

/* 盘子 */
.plateDiv {
  position: absolute;
  overflow: hidden;
  top: 43vh;
  z-index: 0;
  width: 400px;
  height: 400px;
  margin-left: 30vw; /* 当scree宽度到960px时，30vw=288px */
}

.plateImg {
  width: 100%;
  opacity: 0;
  animation: plateMove 1s ease-in forwards;
}

.loginCard {
  min-width: 300px;
  width: 350px !important;
  position: absolute;
  z-index: 2;
  right: 10vw;
  /* left: 60vw; */

  height: 430px;
  margin-top: 120px;
  padding: 20px 20px 0;
  animation: loginCardMove 0.2s ease-in forwards;
}

.registerCard {
  min-width: 300px;
  width: 350px !important;
  position: absolute;
  z-index: 2;
  left: 60vw;
  height: 430px;
  margin-top: 120px;
  padding: 20px 20px 0;
  animation: registerCardMove 0.2s ease-in forwards;
}

.cardHead {
  text-align: left;
}

.slideLink {
  float: right;
  font-family: sanji !important;
  font-size: 18px !important;
}
/* 卡片标题 */
.cardTitle {
  font: 36px bold;
  font-family: sanji;
  padding-bottom: 5px;
}

.cardTitleEn {
  font: 20px bold;
  font-family: sanji;
  padding-bottom: 20px;
}

/* 水平线 */
.line {
  height: 6px;
  background: rgb(227, 165, 102);
  margin-top: 10px;
  margin-bottom: 40px;
}
.radioDiv {
  margin-top: -20px;
  margin-bottom: 30px;
}
.el-radio-button {
  border-radius: 4px;
  .el-radio-button__inner {
    height: 34px;
    line-height: 18px;
    background: #f7f8fa;
    color: #333;
    border: 0 !important;
  }
  .el-radio-button__inner:hover {
    color: #e3a566;
  }
  .el-radio-button__original-radio:checked + .el-radio-button__inner {
    color: white;
    background-color: #e3a566;
    border-color: #e3a566;
    box-shadow: -1px 0 0 0 #e3a566;
  }
}

.el-form-item {
  margin-bottom: 20px !important;
}

.loginCard .el-form-item__label {
  font-size: 20px !important;
  font-family: sanji;
  width: 110px;
  text-align: left;
  display: block !important;
}
.registerCard .el-form-item__label {
  font-size: 20px !important;
  font-family: sanji;
  width: 110px;
  text-align: left;
  display: block !important;
}

/* 修改el-input在选中时的蓝色 */
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #e3a566 inset !important;
}

.el-input {
  font-size: 16px !important;
  font-family: sanji;
}

.loginBtn {
  color: white !important;
  font-size: 18px !important;
  font-family: sanji;
}
.registerBtn {
  color: white !important;
  font-size: 18px !important;
  font-family: sanji;
}

.intro {
  margin-top: 20px;
  font-size: 12px;
  color: grey;
}

@keyframes loginCardMove {
  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }

  /* 开始状态 */
  0% {
    transform: translateX(-55vw);
  }

  /* 结束状态 */
  100% {
    transform: translateX(0px);
  }
}

@keyframes registerCardMove {
  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }

  /* 开始状态 */
  0% {
    transform: translateX(0px);
  }

  /* 结束状态 */
  100% {
    transform: translateX(-55vw);
  }
}

/* 盘子 */
@keyframes plateMove {
  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }

  /* 开始状态 */
  0% {
    transform: translateX(-200px);
  }

  /* 结束状态 */
  100% {
    transform: translateX(0px);
  }
}

@keyframes leftLoginAni {
  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }

  /* 开始状态 */
  0% {
    transform: translateX(35vw);
  }

  /* 结束状态 */
  100% {
    transform: translateX(0px);
  }
}

@keyframes leftRegisterAni {
  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }

  /* 开始状态 */
  0% {
    transform: translateX(0px);
  }

  /* 结束状态 */
  100% {
    transform: translateX(35vw);
  }
}

/* 适配PC */
@media screen and (min-width: 960px) {
}
/* 适配iPad */
@media screen and (max-width: 960px) and (min-width: 600px) {
  .titleDiv {
    display: none;
  }

  .plateDiv {
    margin-left: 30px;
  }
}
@media screen and (max-width: 600px) {
  .login-logo-div {
    position: absolute;
    width: 300px;
    margin-top: 20px;
  }
  .plateDiv,
  .titleDiv {
    display: none;
  }

  .loginCard {
    position: absolute;
    left: 10vw;
    width: 70vw !important;
    margin: calc(120px + 1vw) auto 0;
  }
  .registerCard {
    position: absolute;
    width: 70vw !important;
    margin-top: calc(120px + 1vw);
    margin-left: 10vw;
  }
}
</style>
